<template>  
    <div>  
      <h2>已完成项</h2>  
      <div v-for="(item, index) in completedItems" :key="index" class="list-item">  
        <span>{{ item.content }}</span>  
      </div>  
    </div>  
  </template>  
    
  <script setup>  
  import { computed } from 'vue';  
  import { defineProps } from 'vue';  
    
  const props = defineProps({  
    addList: {  
      type: Array,  
      required: true  
    }  
  });  
    
  const completedItems = computed(() => {  
    return props.addList.filter(item => item.completed);  
  });  
  </script>  
    
    <style scoped>  
    h2 {  
      text-align: center;   
      margin-bottom: 20px;  
      color: #333;
      font-size: 20px;
    }  
      
    .list-item {  
      background-color: #f9f9f9; 
      border: 1px solid #ddd;  
      border-radius: 5px;  
      padding: 10px;   
      margin-bottom: 10px;   
      font-size: 10px;   
      color: #666;   
    }  
      
     
    .list-item::before {  
      content: "✓"; 
      display: inline-block;  
      width: 20px; 
      margin-right: 10px;   
      color: #4caf50; 
      font-weight: bold;  
    } 
   
    
    </style>